import React from 'react';
import { View, Text, StyleSheet, ScrollView, TouchableOpacity, Image } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import Ionicons from 'react-native-vector-icons/Ionicons';

const MyScreen = () => {
  return (
    <SafeAreaView style={styles.container}>
      <ScrollView contentContainerStyle={styles.contentContainer}>
        {/* 顶部登录区域 */}
        <View style={styles.loginSection}>
          <View style={styles.userAvatar}>
          
          </View>
          <TouchableOpacity style={styles.loginButton}>
            <Text style={styles.loginButtonText}>立即登录</Text>
          </TouchableOpacity>
        </View>

        {/* 导航菜单 */}
        <View style={styles.navMenu}>
          <TouchableOpacity style={styles.navItem}>
            <Ionicons name="download-outline" size={24} color="#CCCCCC" />
            <Text style={styles.navText}>本地音乐</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.navItem}>
            <Ionicons name="radio-outline" size={24} color="#CCCCCC" />
            <Text style={styles.navText}>我的电台</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.navItem}>
            <Ionicons name="star-outline" size={24} color="#CCCCCC" />
            <Text style={styles.navText}>我的收藏</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.navItem}>
            <Ionicons name="musical-notes-outline" size={24} color="#CCCCCC" />
            <Text style={styles.navText}>关注新歌</Text>
          </TouchableOpacity>
        </View>

        {/* 我的音乐区域 */}
        <View style={styles.myMusicSection}>
          <View style={styles.sectionHeader}>
            <Text style={styles.sectionTitle}>我的音乐</Text>
            <TouchableOpacity>
              <Text style={styles.sectionMore}>更多 &gt;&gt;</Text>
            </TouchableOpacity>
          </View>
          <View style={styles.musicCards}>
            <TouchableOpacity style={styles.musicCard}>
              <View style={styles.cardContent}>
                <Ionicons name="heart" size={28} color="#FF3030" />
                <Text style={styles.cardTitle}>我喜欢的音乐</Text>
              </View>
              <Text style={styles.cardLabel}>心动模式</Text>
            </TouchableOpacity>
            <TouchableOpacity style={styles.musicCard}>
              <View style={styles.cardContent}>
                <Ionicons name="radio" size={28} color="#CCCCCC" />
                <Text style={styles.cardTitle}>私人FM</Text>
              </View>
              <Text style={styles.cardLabel}>听点新鲜的</Text>
            </TouchableOpacity>
            <TouchableOpacity style={styles.musicCard}>
              <View style={styles.cardContent}>
                <Ionicons name="car" size={28} color="#CCCCCC" />
                <Text style={styles.cardTitle}>驾驶模式</Text>
              </View>
              <Text style={styles.cardLabel}>开车安全模式</Text>
            </TouchableOpacity>
          </View>
        </View>

        {/* 最近播放 */}
        <View style={styles.recentSection}>
          <View style={styles.sectionHeader}>
            <Text style={styles.sectionTitle}>最近播放</Text>
            <TouchableOpacity>
              <Text style={styles.sectionMore}>更多 &gt;&gt;</Text>
            </TouchableOpacity>
          </View>
          <View style={styles.recentList}>
            <TouchableOpacity style={styles.recentItem}>
              <View style={styles.recentItemLeft}>
                <Ionicons name="play-circle" size={22} color="#FF3030" />
                <Text style={styles.recentCount}>全部已播放歌曲9首</Text>
              </View>
              <Ionicons name="chevron-forward" size={18} color="#999999" />
            </TouchableOpacity>
            <TouchableOpacity style={styles.recentItem}>
              <Image 
                source={{ uri: 'https://via.placeholder.com/60x60?text=Video' }}
                style={styles.recentThumbnail}
              />
              <View style={styles.recentInfo}>
                <Text style={styles.recentTitle} numberOfLines={1}>视频: 我的世界只有一个某某某</Text>
                <Text style={styles.recentDescription} numberOfLines={1}>演唱者: 某某某</Text>
              </View>
              <Ionicons name="chevron-forward" size={18} color="#999999" />
            </TouchableOpacity>
          </View>
        </View>

        {/* 推荐歌单 */}
        <View style={styles.recommendedSection}>
          <View style={styles.sectionHeader}>
            <Text style={styles.sectionTitle}>推荐歌单</Text>
          </View>
          <View style={styles.rankingTabs}>
            <TouchableOpacity style={styles.rankingTab}>
              <Text style={styles.rankingTabText}>热歌榜</Text>
              <Text style={styles.rankingTabSubtext}>本周最热的歌曲</Text>
            </TouchableOpacity>
            <TouchableOpacity style={styles.rankingTab}>
              <Text style={styles.rankingTabText}>云音乐热歌榜</Text>
              <Text style={styles.rankingTabSubtext}>本周最热的歌曲</Text>
            </TouchableOpacity>
          </View>
          <View style={styles.rankingTabs}>
            <TouchableOpacity style={styles.rankingTab}>
              <Text style={styles.rankingTabText}>新歌榜</Text>
              <Text style={styles.rankingTabSubtext}>本周最热的歌曲</Text>
            </TouchableOpacity>
            <TouchableOpacity style={styles.rankingTab}>
              <Text style={styles.rankingTabText}>云音乐新歌榜</Text>
              <Text style={styles.rankingTabSubtext}>本周最热的歌曲</Text>
            </TouchableOpacity>
          </View>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#000000',
  },
  contentContainer: {
    paddingBottom: 80,
  },
  loginSection: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingHorizontal: 16,
    paddingVertical: 20,
  },
  userAvatar: {
    width: 50,
    height: 50,
    borderRadius: 25,
    backgroundColor: '#333333',
    overflow: 'hidden',
  },
  avatarImage: {
    width: '100%',
    height: '100%',
  },
  loginButton: {
    borderWidth: 1,
    borderColor: '#FFFFFF',
    borderRadius: 20,
    paddingHorizontal: 16,
    paddingVertical: 8,
  },
  loginButtonText: {
    color: '#FFFFFF',
    fontSize: 14,
  },
  navMenu: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    paddingHorizontal: 16,
    marginVertical: 20,
  },
  navItem: {
    alignItems: 'center',
  },
  navText: {
    color: '#FFFFFF',
    fontSize: 12,
    marginTop: 8,
  },
  myMusicSection: {
    paddingHorizontal: 16,
    marginBottom: 20,
  },
  sectionHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 15,
  },
  sectionTitle: {
    color: '#FFFFFF',
    fontSize: 16,
    fontWeight: 'bold',
  },
  sectionMore: {
    color: '#999999',
    fontSize: 12,
  },
  musicCards: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  musicCard: {
    width: '30%',
    aspectRatio: 1,
    backgroundColor: '#222222',
    borderRadius: 8,
    padding: 12,
    position: 'relative',
  },
  cardContent: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  cardTitle: {
    color: '#FFFFFF',
    fontSize: 12,
    marginTop: 8,
    textAlign: 'center',
  },
  cardLabel: {
    position: 'absolute',
    bottom: 8,
    left: 8,
    color: '#999999',
    fontSize: 10,
  },
  recentSection: {
    paddingHorizontal: 16,
    marginBottom: 20,
  },
  recentList: {
    backgroundColor: '#222222',
    borderRadius: 8,
    overflow: 'hidden',
  },
  recentItem: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    padding: 12,
    borderBottomWidth: 1,
    borderBottomColor: '#333333',
  },
  recentItemLeft: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  recentCount: {
    color: '#FFFFFF',
    fontSize: 14,
    marginLeft: 8,
  },
  recentThumbnail: {
    width: 60,
    height: 40,
    borderRadius: 4,
  },
  recentInfo: {
    flex: 1,
    marginLeft: 12,
  },
  recentTitle: {
    color: '#FFFFFF',
    fontSize: 14,
  },
  recentDescription: {
    color: '#999999',
    fontSize: 12,
    marginTop: 4,
  },
  recommendedSection: {
    paddingHorizontal: 16,
    marginBottom: 20,
  },
  rankingTabs: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginBottom: 12,
  },
  rankingTab: {
    width: '48%',
    backgroundColor: '#222222',
    borderRadius: 8,
    padding: 12,
  },
  rankingTabText: {
    color: '#FFFFFF',
    fontSize: 14,
    fontWeight: 'bold',
  },
  rankingTabSubtext: {
    color: '#999999',
    fontSize: 12,
    marginTop: 4,
  },
});

export default MyScreen; 